<template>
	<view class="container">
		<!-- 地址信息标题区域 -->
		<view class="header-section">
			<view class="header-content">
				<text class="header-title">地址信息</text>
				<view class="default-option" @click="toggleDefault">
					<view class="checkbox" :class="[address.status === 1 ? 'checked' : '']">
						<text v-if="address.status === 1" class="check-icon">✓</text>
					</view>
					<text class="default-text">设为默认地址</text>
				</view>
			</view>
		</view>

		<!-- 表单内容 -->
		<view class="form-content">
			<!-- 联系人 -->
			<view class="form-item">
				<view class="form-label">
					<text class="label-text">联系人</text>
					<text class="required">*</text>
				</view>
				<view class="form-input">
					<input
						v-model="address.nickname"
						placeholder="请输入联系人姓名"
						class="input-field"
					/>
				</view>
			</view>

			<!-- 联系电话 -->
			<view class="form-item">
				<view class="form-label">
					<text class="label-text">联系电话</text>
					<text class="required">*</text>
				</view>
				<view class="form-input">
					<input
						v-model="address.phone"
						placeholder="请输入手机号码"
						class="input-field"
						type="number"
						maxlength="11"
					/>
				</view>
			</view>

			<!-- 所在地区 -->
			<view class="form-item">
				<view class="form-label">
					<text class="label-text">所在地区</text>
					<text class="required">*</text>
				</view>
				<view class="form-input" @click="addressPop()">
					<input
						v-model="address.address"
						placeholder="请选择所属省、市"
						class="input-field"
						disabled
					/>
					<text class="arrow-icon">›</text>
				</view>
			</view>

			<!-- 详细地址 -->
			<view class="form-item">
				<view class="form-label">
					<text class="label-text">详细地址</text>
					<text class="required">*</text>
				</view>
				<view class="form-input">
					<input
						v-model="address.house"
						placeholder="小区、写字楼、门牌等"
						class="input-field"
					/>
				</view>
			</view>
		</view>

		<!-- 保存按钮 -->
		<view class="save-button">
			<view class="primary-button" @click="formSubmit">保存地址</view>
		</view>

		<!-- 地区选择器 -->
		<u-picker mode="region" v-model="showPicker" @confirm="addressConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPicker: false,
				address: {
					nickname: "",
					phone: "",
					address: "",
					house: "",
					status: 0,
				},
				userInfo: {}
			}
		},
		onLoad(options) {
			// 获取用户信息
			this.userInfo = uni.getStorageSync('userInfo') || {};

			// 如果是编辑模式，加载地址详情
			if (options.id) {
				this.loadAddressDetail(options.id);
			}
		},
		methods: {
			// 加载地址详情
			loadAddressDetail(id) {
				uni.showLoading({
					title: '加载中...'
				});

				this.$api.getAddressDetail(id).then(res => {
					this.address = res;
				}).catch(error => {
					console.error('加载地址详情失败:', error);
					uni.showToast({
						title: '加载地址详情失败',
						icon: 'none'
					});
				}).finally(() => {
					uni.hideLoading();
				});
			},

			// 切换默认地址状态
			toggleDefault() {
				this.address.status = this.address.status === 1 ? 0 : 1;
			},

			// 打开/关闭地址Picker
			addressPop() {
				this.showPicker = !this.showPicker;
			},

			// Picker回调
			addressConfirm(e) {
				this.address.address = e.province.label + " " + e.city.label + " " + e.area.label;
			},

			// 表单验证
			validateForm() {
				if (!this.address.nickname.trim()) {
					uni.showToast({
						title: '请输入联系人姓名',
						icon: 'none'
					});
					return false;
				}

				if (!this.address.phone.trim()) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					});
					return false;
				}

				// 手机号格式验证
				const phoneRegex = /^1[3-9]\d{9}$/;
				if (!phoneRegex.test(this.address.phone)) {
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none'
					});
					return false;
				}

				if (!this.address.address.trim()) {
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					});
					return false;
				}

				if (!this.address.house.trim()) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					});
					return false;
				}

				return true;
			},

			// 表单提交
			formSubmit() {
				if (!this.validateForm()) {
					return;
				}

				// 添加用户ID
				const formData = {
					...this.address,
					user_id: this.userInfo.id
				};

				uni.showLoading({
					title: '保存中...'
				});

				if (this.address.id) {
					// 编辑模式
					this.$api.updateAddress(this.address.id, formData).then(res => {
						uni.hideLoading();
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}).catch(error => {
						uni.hideLoading();
						console.error('修改地址失败:', error);
						uni.showToast({
							title: '修改失败',
							icon: 'none'
						});
					});
				} else {
					// 新增模式
					this.$api.addAddress(formData).then(res => {
						uni.hideLoading();
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}).catch(error => {
						uni.hideLoading();
						console.error('添加地址失败:', error);
						uni.showToast({
							title: '添加失败',
							icon: 'none'
						});
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F5F5F5;
		padding-bottom: 120rpx; /* 为底部按钮留出空间 */
	}

	/* 头部区域 */
	.header-section {
		padding: 32rpx 30rpx;
		border-bottom: 1rpx solid #F5F5F5;

		.header-content {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.header-title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}

			.default-option {
				display: flex;
				align-items: center;
				gap: 12rpx;

				.checkbox {
					width: 36rpx;
					height: 36rpx;
					border: 2rpx solid #539DF3;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					background: transparent;
					transition: all 0.3s ease;

					&.checked {
						background: #539DF3;

						.check-icon {
							color: #FFFFFF;
							font-size: 20rpx;
							font-weight: bold;
						}
					}
				}

				.default-text {
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}

	/* 表单内容 */
	.form-content {
		padding: 0 30rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
	}

	/* 表单项 */
	.form-item {
		padding: 32rpx 0;
		border-bottom: 1rpx solid #F5F5F5;

		&:last-child {
			border-bottom: none;
		}

		.form-label {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;

			.label-text {
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
			}

			.required {
				font-size: 28rpx;
				color: #FF4757;
				margin-left: 4rpx;
			}
		}

		.form-input {
			position: relative;
			display: flex;
			align-items: center;

			.input-field {
				flex: 1;
				font-size: 28rpx;
				color: #333333;
				background: transparent;
				border: none;
				outline: none;
				padding: 0;

				&::placeholder {
					color: #CCCCCC;
				}

				&:disabled {
					color: #CCCCCC;
				}
			}

			.arrow-icon {
				font-size: 32rpx;
				color: #CCCCCC;
				margin-left: 12rpx;
			}
		}
	}

	/* 保存按钮 */
	.save-button {
		position: fixed;
		padding: 24rpx 24rpx 60rpx 24rpx;
		background-color: #FFFFFF;
    bottom: 0;
		left: 0rpx;
		right: 0rpx;
		z-index: 100;
	}
</style>
